
import React, { useState } from 'react';
import { Table, Spin, Button } from 'antd';
import Link from 'next/link';

const AllBlogList = ({ blogs, loading }) => {
  const [sortOrder, setSortOrder] = useState(null); // 状态来存储当前的排序顺序

  console.log("传递给 LearningTable 组件的博客数据:", blogs);

  if (loading) {
    return <Spin />;
  }

  const handleSortByTime = () => {
    setSortOrder(sortOrder === 'ascend' ? 'descend' : 'ascend'); // 切换排序顺序
  };

  const columns = [
    // {
    //   title: 'Blog ID',
    //   dataIndex: 'blog_id',
    //   key: 'blog_id',
    // },
    // {
    //   title: 'User ID',
    //   dataIndex: 'user_id',
    //   key: 'user_id',
    // },
    {
      title: 'Title',
      dataIndex: 'title',
      key: 'title',
    },
    // {
    //   title: 'Content',
    //   dataIndex: 'content',
    //   key: 'content',
    // },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at',
      sorter: (a, b) => new Date(a.created_at) - new Date(b.created_at),
      sortOrder: sortOrder,
    },
    {
      title: 'Updated At',
      dataIndex: 'updated_at',
      key: 'updated_at',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, row) => (
        <div style={{ display: 'flex' }}>
          <Link href={`/courses/${row.blog_id}`}>
            <Button>查看详情</Button>
          </Link>
        </div>
      ),
    },
  ];

  return (
    <div>
       <h1 style={{ textAlign: 'center', fontSize: '28px', marginBottom: '24px' }}>博客信息列表</h1>
      <Button onClick={handleSortByTime}>
        {sortOrder === 'ascend' ? '按时间降序排列' : '按时间升序排列'}
      </Button>
      <Table columns={columns} dataSource={blogs} rowKey="blog_id" />
    </div>
  );
};

export default AllBlogList;
